<template>
    <div class="container">
        <!-- 顶部 -->
        <van-nav-bar
            title="搜索"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        >
            <template #title>
                <van-field class="field" v-model="searchWords" placeholder="请输入关键字" />
            </template>
            <template #right>
				<div @click="toRoom" class="btn">搜索</div>
			</template>
        </van-nav-bar>
    </div>
</template>
<script>
export default {
    data(){
        return{
            searchWords:""
        }
    },
    methods:{
        // 返回上一级
        onClickLeft(){
            this.$router.go(-1);
        },
        // 去店铺列表
        toRoom(){
            this.$router.push({name:'room',params: {Words:this.searchWords}})
        }
    }
}
</script>
<style lang="less" scoped>
// 顶部样式
/deep/.van-nav-bar__text{
	color: #333;
}
/deep/.van-nav-bar{
	.van-icon{
		color: #333;
	}
}
// 输入框
/deep/.van-field__control{
    background-color: #F7F7F7;
    width: 3.5rem;
    height: 0.64rem;
    border-radius: 5px;
    padding-left: 0.2rem;
}
/deep/.van-nav-bar__title{
    max-width: 80%;
}
// 搜索
.btn{
    width: 1.5rem;
    height: 0.75rem;
    border-radius: 5px;
    color: #fff;
    font-size: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FB9805;
}
</style>